<template>
  <div>
    <Row type="flex" class="common_window_top" align="middle" justify="start">
      <Col span="4">
        <div>
          <span class="title">
            <Icon type="ios-contacts" size="45"/>服务器列表</span>
        </div>
      </Col>
      <Col span="20">
        <div style="float: right">
          <Form ref="" label-position="right" :label-width="80" inline>
            <FormItem label="服务器名称:" >
              <Input type="text" placeholder="服务器名称" v-model="parameters.systemName"/>
            </FormItem>
            <FormItem label="系统类型:">
              <Select v-model="parameters.systemType" placeholder="系统类型" clearable>
                <Option v-for="item in dictArray.systemType" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem :label-width="0">
              <Button type="primary" @click="findButton">查询</Button>
            </FormItem>
            <FormItem :label-width="0" style="margin-left: 10px;">
              <Button type="success" @click="addRoleButton">新增</Button>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
    <br>
    <Row class="common_window_down">
      <Col span="24">
        <Table border :columns="serverColumn" :data="serverList"></Table>
        <Page :current="parameters.current" :total="total" :page-size="parameters.size"  @on-change="changePageCurrent" @on-page-size-change="changePageSize" show-sizer show-elevator show-total></Page>
      </Col>
    </Row>

    <Modal v-model="addOrUpdateServer.isShow" :title="addOrUpdateServer.parameters.id ? '修改服务' : '新增服务'" :mask-closable="false">
      <Form ref="formValidate" label-position="right" :model="addOrUpdateServer.parameters" :rules="addOrUpdateServer.ruleValidate" :label-width="80" inline>
        <Row :gutter="3">
          <Col span="24">
            <FormItem label="服务名称:" prop="systemName">
              <Input v-model="addOrUpdateServer.parameters.systemName" type="text" placeholder="角色名称" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" size="large" :loading="addOrUpdateServer.loading" @click="sendForm">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {listPage,addServer,updateServer,deleteServer} from "../../../api/sys/server/serverBaseInfo";
  import {mapState,mapMutations} from "vuex";

  export default {
    name: "",
    computed : {
      ...mapState(['dictObject','dictArray'])
    },
    data(){
      return {
        parameters:{
          current: 1,
          size: 10,
          systemName: '',
          systemType: '',
        },
        total: 0,
        serverList: [],
        serverColumn: [
          {title : 'ID',key : 'id',align : 'center',tooltip : true,minWidth: 100,maxWidth: 200},
          {title : '服务名称',key : 'systemName',align : 'center',tooltip : true},
          {title : '系统类型',key : 'systemType',align : 'center',tooltip : true},
          {title : '系统版本',key : 'systemVersion',align : 'center',tooltip : true,minWidth: 100},
          {title : '启动时间',key : 'startTime',align : 'center',tooltip : true},
          {title : 'cpu信息',key : 'cpuInfo',align : 'center',tooltip : true},
          {title : '物理核心数',key : 'cpuPhysicalNum',align : 'center',tooltip : true,maxWidth: 100},
          {title : '核心数',key : 'cpuPhysicalCoreNum',align : 'center',tooltip : true,maxWidth: 90},
          {title : '逻辑核心',key : 'cpuLogicalCoreNum',align : 'center',tooltip : true,maxWidth: 90},
          {title : 'Cpu使用率(%)',key : 'cpuUsageRate',align : 'center',tooltip : true,maxWidth: 120},
          {title : '状态',align : 'center',tooltip : true,maxWidth: 90,render : (h,parame)=>{
            const text = this.dictObject.onlineStatus[parame.row.onlineStatus];
            if(parame.row.onlineStatus == "0"){
              return h("Tag",{
                props: {
                  color: 'error',
                  size: 'default'
                },
              },text);
            }else if (parame.row.onlineStatus == "1") {
              return h("Tag",{
                props: {
                  color: 'success',
                  size: 'default'
                },
              },text);
            }else {
              return h("Tag",{
                props: {
                  color: 'default',
                  size: 'default'
                },
              },"未接入");
            }
            }},
          {title : '操作',align : 'center',maxWidth: 200,render : (h,parame)=>{
              const buttons = [];
              buttons.push(h('Button',{
                props: {
                  type: 'info',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on : {
                  click : ()=>{
                    this.changeCurrentView({url:"/main/serversDetailInfo",title : '服务器详情',parame : parame.row.id})
                  }
                }
              },'详情'));
              buttons.push(h('Button',{
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                nativeOn : {
                  click : ()=>{
                    this.addOrUpdateServer.parameters.id = parame.row.id;
                    this.addOrUpdateServer.parameters.systemName = parame.row.systemName;
                    this.addOrUpdateServer.isShow = true;
                  }
                }
              },'修改'));
              buttons.push(h('Button',{
                props: {
                  type: 'error',
                  size: 'small'
                },
                on : {
                  click : ()=>{
                    this.deleteServer(parame.row.id);
                  }
                }
              },'删除'));
              return h('div', {}, buttons);
            }
          }
        ],
        addOrUpdateServer:{
          isShow: false,
          parameters: {
            id: null,
            systemName: null,
          },
          ruleValidate :{
            systemName : { required: true, message: '必填！', trigger: 'change' },
          }
        }
      }
    },
    mounted(){
      this.findButton();
    },
    methods:{
      ...mapMutations(['changeCurrentView']),
      findButton(){
        this.parameters.current = 1;
        listPage(this.parameters).then(result =>{
          const data = result.data;
          this.parameters.current = data.current;
          this.total = data.total;
          this.serverList = data.records;
        });
      },
      addRoleButton(){
        this.addOrUpdateServer.isShow = true;
        this.addOrUpdateServer.parameters.id = null;
        this.$refs['formValidate'].resetFields();
      },
      sendForm(){
        this.$refs["formValidate"].validate(valid =>{
          if (valid) {
            this.addOrUpdateServer.loading = true;
            if (this.addOrUpdateServer.parameters.id) {
              updateServer(this.addOrUpdateServer.parameters.id, this.addOrUpdateServer.parameters).then(result => {
                this.addOrUpdateSuccess(false);
              }, error => {
                this.addOrUpdateServer.loading = false;
              });
            }else {
              addServer(this.addOrUpdateServer.parameters).then(result => {
                this.addOrUpdateSuccess(false);
              }, error => {
                this.addOrUpdateServer.loading = false;
              });
            }
          }
        })
      },
      deleteServer(id) {
        deleteServer(id).then(result => {
          this.$Message.success('删除成功！');
          this.findButton();
        });
      },
      addOrUpdateSuccess(or){
        this.addOrUpdateServer.isShow = false;
        this.addOrUpdateServer.loading = false;
        this.$Message.success(or ? '新增成功！' : '修改成功！' );
        this.findButton();
      },
      changePageCurrent(current){
        this.parameters.current = current;
        this.findRoleList();
      },
      changePageSize(size){
        this.parameters.size = size;
        this.findRoleList();
      }
    }

  };

</script>
